<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原型结构</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .part_imgText_11_content li {
            padding: 0;
        }

        .part_imgText_11_content li:nth-child(1) {
            background-color: slateblue;
        }

        .part_imgText_11_content li:nth-child(2) {
            background-color: salmon;
        }

        .part_imgText_11_content li:nth-child(3) {
            background-color: seagreen;
        }

        .part_imgText_11_content li:nth-child(4) {
            background-color: skyblue;
        }

        .part_imgText_11_item_box {
            padding: 119px 40px;
            display: flex;
            justify-content: space-between;
        }

        .part_imgText_11_item_img {
            width: 100%;
            height: 230px;
            padding: 0;
        }

        .part_imgText_11_item_img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .part_imgText_11_item_text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 40px;
        }

        .part_imgText_11_item_text p {
            padding-bottom: 40px;
            color: var(--c_b_nav);
            font-size: var(--f_text);
            line-height: var(--l_text);
        }

        .part_imgText_11_item_text span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            color: var(--c_b_nav);
            font-size: var(--f_describe);
            line-height: var(--l_describe);
        }

        /* 控制按钮 */
        .part_imgText_11 .button_big {
            display: block;
            text-align: center;
        }

        @media (max-width:768px) {
            .part_imgText_11_item_box {
                display: initial;
                padding: 0;
            }

            .part_imgText_11_item_img {
                margin: auto;
                width: 80%;
                height: 113px;
                margin-top: 20px;
            }

            .part_imgText_11_item_img img {
                object-fit: contain;
            }

            .part_imgText_11_item_text {
                padding: 20px 20px;
            }
        }
    </style>
</head>

<body>
    <div class="part_imgText_11 modular">
        <ul class="part_imgText_11_content row">
            <li class="col-xl-6 col-12 part_imgText_11_item">
                <div class="part_imgText_11_item_box row">
                    <div class="col-xl-6 col-12 part_imgText_11_item_img">
                        <img src="../images/party_imgText_11.png.webp" alt="">
                    </div>
                    <div class="col-xl-6 col-12 part_imgText_11_item_text">
                        <p>消费领域</p>
                        <span>为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。</span>
                    </div>
                </div>
            </li>

            <li class="col-xl-6 col-12 part_imgText_11_item">
                <div class="part_imgText_11_item_box row">
                    <div class="col-xl-6 col-12 part_imgText_11_item_img">
                        <img src="../images/party_imgText_11.png.webp" alt="">
                    </div>
                    <div class="col-xl-6 col-12 part_imgText_11_item_text">
                        <p>消费领域</p>
                        <span>为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。</span>
                    </div>
                </div>
            </li>

            <li class="col-xl-6 col-12 part_imgText_11_item">
                <div class="part_imgText_11_item_box row">
                    <div class="col-xl-6 col-12 part_imgText_11_item_img">
                        <img src="../images/party_imgText_11.png.webp" alt="">
                    </div>
                    <div class="col-xl-6 col-12 part_imgText_11_item_text">
                        <p>消费领域</p>
                        <span>为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。</span>
                    </div>
                </div>
            </li>

            <li class="col-xl-6 col-12 part_imgText_11_item">
                <div class="part_imgText_11_item_box row">
                    <div class="col-xl-6 col-12 part_imgText_11_item_img">
                        <img src="../images/party_imgText_11.png.webp" alt="">
                    </div>
                    <div class="col-xl-6 col-12 part_imgText_11_item_text">
                        <p>消费领域</p>
                        <span>为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。为消费应用的拓展提供更多的想象空间，满足如手机壳、镜框、耳机、口罩、保温杯等产品的个性化需求，加快消费品的迭代速度。</span>
                    </div>
                </div>
            </li>
            <a class="button_big" href="">
                了解更多
            </a>
        </ul>
    </div>
</body>

</html>